<template>
  <div class="qualification-management">
    <div class="module-title">
      <div class="title-icon">📜</div>
      <div class="title-text">人员资质管理</div>
    </div>
    
    <div class="qualification-summary">
      <div class="summary-item valid">
        <div class="count">{{ validCount }}</div>
        <div class="label">有效证书</div>
      </div>
      <div class="summary-item expiring">
        <div class="count">{{ expiringCount }}</div>
        <div class="label">即将过期</div>
      </div>
      <div class="summary-item expired">
        <div class="count">{{ expiredCount }}</div>
        <div class="label">已过期</div>
      </div>
    </div>
    
    <div class="qualification-chart">
      <div class="chart-container" ref="qualificationChart"></div>
    </div>
    
    <div class="expiring-list">
      <div class="list-title">证书到期提醒</div>
      <div class="list-content">
        <div 
          v-for="(cert, index) in expiringCertificates" 
          :key="index"
          class="cert-item"
          :class="cert.urgency"
        >
          <div class="cert-info">
            <div class="cert-name">{{ cert.name }}</div>
            <div class="cert-type">{{ cert.type }}</div>
          </div>
          <div class="cert-days">
            <span class="days-count" :class="cert.urgency">{{ cert.daysLeft }}</span>
            <span class="days-label">天</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="cert-types">
      <div class="types-title">证书类型分布</div>
      <div class="types-list">
        <div 
          v-for="(type, index) in certificateTypes" 
          :key="index"
          class="type-item"
        >
          <div class="type-name">{{ type.name }}</div>
          <div class="type-progress">
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{ width: (type.count / totalCertificates * 100) + '%' }"
              ></div>
            </div>
            <span class="type-count">{{ type.count }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'QualificationManagement',
  data() {
    return {
      validCount: 142,
      expiringCount: 8,
      expiredCount: 3,
      expiringCertificates: [
        { name: '张建国', type: '特种设备作业证', daysLeft: 5, urgency: 'urgent' },
        { name: '李明华', type: '电工作业证', daysLeft: 12, urgency: 'warning' },
        { name: '王大力', type: '高空作业证', daysLeft: 18, urgency: 'normal' },
        { name: '陈志强', type: '焊工资格证', daysLeft: 25, urgency: 'normal' },
        { name: '赵小明', type: '起重机械证', daysLeft: 7, urgency: 'urgent' },
        { name: '刘德华', type: '安全员证', daysLeft: 15, urgency: 'warning' }
      ],
      certificateTypes: [
        { name: '电工作业证', count: 28 },
        { name: '焊工资格证', count: 35 },
        { name: '高空作业证', count: 22 },
        { name: '起重机械证', count: 18 },
        { name: '特种设备证', count: 15 },
        { name: '安全员证', count: 25 },
        { name: '其他证书', count: 10 }
      ],
      chart: null,
      timer: null
    }
  },
  computed: {
    totalCertificates() {
      return this.certificateTypes.reduce((total, type) => total + type.count, 0)
    }
  },
  mounted() {
    this.initChart()
    this.startDataUpdate()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.qualificationChart)
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          backgroundColor: 'rgba(0,0,0,0.8)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'vertical',
          left: 5,
          top: 'middle',
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          itemWidth: 8,
          itemHeight: 6
        },
        series: [
          {
            name: '证书状态',
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { 
                value: this.validCount, 
                name: '有效证书',
                itemStyle: { color: '#00d4aa' }
              },
              { 
                value: this.expiringCount, 
                name: '即将过期',
                itemStyle: { color: '#ffa726' }
              },
              { 
                value: this.expiredCount, 
                name: '已过期',
                itemStyle: { color: '#ff6b6b' }
              }
            ]
          }
        ]
      }
      
      this.chart.setOption(option)
    },
    
    startDataUpdate() {
      this.timer = setInterval(() => {
        this.updateData()
      }, 20000) // 每20秒更新一次
    },
    
    updateData() {
      // 模拟证书过期情况的变化
      this.expiringCertificates.forEach(cert => {
        if (Math.random() < 0.1) { // 10% 概率天数减少
          cert.daysLeft = Math.max(0, cert.daysLeft - 1)
          
          // 更新紧急程度
          if (cert.daysLeft <= 7) {
            cert.urgency = 'urgent'
          } else if (cert.daysLeft <= 15) {
            cert.urgency = 'warning'
          } else {
            cert.urgency = 'normal'
          }
          
          // 如果过期了，移到已过期计数
          if (cert.daysLeft === 0) {
            this.expiredCount++
            this.expiringCount = Math.max(0, this.expiringCount - 1)
          }
        }
      })
      
      // 更新图表
      if (this.chart) {
        this.chart.setOption({
          series: [{
            data: [
              { 
                value: this.validCount, 
                name: '有效证书',
                itemStyle: { color: '#00d4aa' }
              },
              { 
                value: this.expiringCount, 
                name: '即将过期',
                itemStyle: { color: '#ffa726' }
              },
              { 
                value: this.expiredCount, 
                name: '已过期',
                itemStyle: { color: '#ff6b6b' }
              }
            ]
          }]
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.qualification-management {
  height: 100%;
  padding: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .title-icon {
      font-size: 18px;
      margin-right: 6px;
    }
    
    .title-text {
      font-size: 15px;
      font-weight: bold;
      color: #ffa726;
    }
  }
  
  .qualification-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: 8px;
    gap: 6px;
    flex-shrink: 0;
    
    .summary-item {
      text-align: center;
      padding: 6px 4px;
      border-radius: 4px;
      flex: 1;
      
      .count {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 2px;
      }
      
      .label {
        font-size: 10px;
        opacity: 0.8;
      }
      
      &.valid {
        background-color: rgba(0, 212, 170, 0.2);
        .count { color: #00d4aa; }
      }
      
      &.expiring {
        background-color: rgba(255, 167, 38, 0.2);
        .count { color: #ffa726; }
      }
      
      &.expired {
        background-color: rgba(255, 107, 107, 0.2);
        .count { color: #ff6b6b; }
      }
    }
  }
  
  .qualification-chart {
    height: 90px;
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .chart-container {
      width: 100%;
      height: 100%;
    }
  }
  
  .expiring-list {
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .list-title {
      font-size: 11px;
      color: #999;
      margin-bottom: 4px;
      padding-bottom: 3px;
      border-bottom: 1px solid #333;
    }
    
    .list-content {
      max-height: 80px;
      overflow-y: auto;
      overflow-x: hidden;
      
      .cert-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 5px;
        margin-bottom: 3px;
        border-radius: 3px;
        font-size: 10px;
        
        &.urgent {
          background-color: rgba(255, 107, 107, 0.1);
          border-left: 3px solid #ff6b6b;
        }
        
        &.warning {
          background-color: rgba(255, 167, 38, 0.1);
          border-left: 3px solid #ffa726;
        }
        
        &.normal {
          background-color: rgba(79, 195, 247, 0.1);
          border-left: 3px solid #4fc3f7;
        }
        
        .cert-info {
          flex: 1;
          min-width: 0;
          padding-left: 4px;
          
          .cert-name {
            font-weight: bold;
            margin-bottom: 1px;
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .cert-type {
            color: #999;
            font-size: 9px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .cert-days {
          text-align: center;
          flex-shrink: 0;
          margin-left: 6px;
          
          .days-count {
            font-size: 13px;
            font-weight: bold;
            
            &.urgent { color: #ff6b6b; }
            &.warning { color: #ffa726; }
            &.normal { color: #4fc3f7; }
          }
          
          .days-label {
            font-size: 10px;
            color: #999;
          }
        }
      }
    }
  }
  
  .cert-types {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .types-title {
      font-size: 11px;
      color: #999;
      margin-bottom: 4px;
      padding-bottom: 3px;
      border-bottom: 1px solid #333;
      flex-shrink: 0;
    }
    
    .types-list {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      
      .type-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 10px;
        
        .type-name {
          width: 90px;
          flex-shrink: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .type-progress {
          flex: 1;
          display: flex;
          align-items: center;
          margin-left: 8px;
          min-width: 0;
          
          .progress-bar {
            flex: 1;
            height: 4px;
            background: #333;
            border-radius: 2px;
            overflow: hidden;
            margin-right: 8px;
            
            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #4fc3f7, #00d4aa);
              border-radius: 2px;
              transition: width 0.3s ease;
            }
          }
          
          .type-count {
            width: 22px;
            text-align: right;
            color: #4fc3f7;
            font-weight: bold;
            font-size: 11px;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}

/* 滚动条样式 */
.list-content::-webkit-scrollbar {
  width: 3px;
}

.list-content::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.list-content::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.list-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>



